<template>
  <div class="upload-container">
    <el-upload
      :show-file-list="showList"
      :data="dataobj"
      :action="action"
      :multiple="multiple"
      :name="fileName"
      :accept="accept"
      :drag="drag"
      :limit="limit"
      :file-list="fileList"
      :on-preview="handlePreview"
      :on-exceed="handleExceed"
      :before-upload="beforeUpload"
      :on-progress="onProgress"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-remove="handleRemove"
      list-type="picture">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import { getArrByKey, fileListFromStr } from '@/utils'
export default {
  name: 'FileUpload',
  props: {
    value: {
      type: String,
      default: () => ''
    },
    config: {
      type: Object,
      default: () => {
        return {
          fileName: 'file',
          limit: 5,
          multiple: false,
          accept: '*/*',
          action: '',
          extension: '',
          maxSize: 1024 * 1024 * 5,
          drag: false,
          showList: true
        }
      }
    }
  },
  data() {
    return {
      fileName: this.config.fileName,
      multiple: this.config.multiple,
      limit: this.config.multiple ? this.config.limit : 1,
      extension: this.config.extension,
      maxSize: this.config.maxSize ? this.config.maxSize : 1024 * 1024 * 5,
      accept: this.config.accept,
      action: this.config.action,
      drag: this.config.drag,
      dataobj: { filename: this.config.fileName },
      showList: this.config.showList
    }
  },
  computed: {
    fileList() {
      return fileListFromStr(this.value)
    }
  },
  methods: {
    emitInput(val) {
      this.$emit('input', val)
    },
    handleRemove(file, fileList) {
      this.emitInput(getArrByKey(fileList, 'url').join(','))
    },
    handlePreview(file) {
    },
    handleExceed(files, fileList) {
      this.$message.error('最多上传' + this.limit + '个文件')
    },
    beforeUpload(file) {
      // 判断后缀名
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
      let isExtension = true
      if (this.extension) {
        isExtension = this.extension.split(',').indexOf(extension) !== -1
      }
      // 文件大小
      const isLtSize = file.size < this.maxSize
      if (!isExtension) {
        this.$message.error('上传文件只能是' + this.extension + '格式!')
        return false
      }
      if (!isLtSize) {
        this.$message.error('上传文件大小不能超过 ' + this.maxSize + '!')
        return false
      }
      return isExtension && isLtSize
    },
    onProgress(event, file, fileList) {
    },
    handleSuccess(res, file, fileList) {
      if (res.status === 1) {
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i]['uid'] === file['uid']) {
            fileList[i]['url'] = res.data.url
            break
          }
        }
        this.emitInput(getArrByKey(fileList, 'url').join(','))
      } else {
        // 失败,删除预览中刚上传的
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i]['uid'] === file['uid']) {
            fileList.splice(i, 1)
            break
          }
        }
        this.$message.error(res.msg)
      }
    },
    handleError(err, file, fileList) {
      this.$message.error(err)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .upload-container{
    .el-upload{
      .el-button{
        float:left
      }
    }
    /deep/ .el-upload-list__item{
      padding: 10px;
      height: 50px;
      .el-upload-list__item-thumbnail{
        display: none;
      }
      .el-upload-list__item-name{
        line-height: 35px;
      }
    }
  }
</style>
